<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>摄影标签 - 社交标签详情页</title>
    <!-- Bootstrap 5 CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- Font Awesome 图标 -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
    
    <style>
        :root {
            --primary: #4285F4;
            --secondary: #8E24AA;
            --light: #F8F9FA;
            --dark: #202124;
            --gray: #5F6368;
            --light-gray: #E8EAED;
            --border-radius: 8px;
            --card-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
        }
        
        body {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
            background-color: #F5F7FA;
            color: var(--dark);
            padding-top: 56px;
            padding-bottom: 60px;
        }
        
        /* 顶部导航 */
        .top-nav {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            height: 56px;
            background-color: white;
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0 16px;
            z-index: 1000;
            box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
        }
        
        .nav-title {
            font-size: 18px;
            font-weight: 600;
        }
        
        .nav-btn {
            width: 40px;
            height: 40px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
            background: none;
            border: none;
            color: var(--gray);
            font-size: 20px;
        }
        
        .action-btn {
            padding: 6px 14px;
            border-radius: 20px;
            font-size: 14px;
            font-weight: 500;
            background-color: var(--primary);
            color: white;
            border: none;
            display: flex;
            align-items: center;
            gap: 6px;
        }
        
        /* 标签头部 */
        .tag-header {
            background-color: white;
            padding: 16px;
            border-bottom: 1px solid var(--light-gray);
        }
        
        .tag-banner {
            height: 120px;
            background: linear-gradient(135deg, #4285F4, #8E24AA);
            border-radius: var(--border-radius);
            margin-bottom: -40px;
            position: relative;
        }
        
        .tag-info {
            display: flex;
            padding-top: 24px;
            gap: 16px;
        }
        
        .tag-avatar {
            width: 80px;
            height: 80px;
            border-radius: 50%;
            background-color: white;
            border: 4px solid white;
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--secondary);
            font-size: 32px;
            box-shadow: var(--card-shadow);
        }
        
        .tag-details {
            flex: 1;
        }
        
        .tag-name {
            font-size: 22px;
            font-weight: 700;
            margin-bottom: 4px;
        }
        
        .tag-meta {
            display: flex;
            gap: 16px;
            color: var(--gray);
            font-size: 14px;
            margin-bottom: 8px;
        }
        
        .tag-desc {
            font-size: 15px;
            line-height: 1.5;
            margin-bottom: 12px;
        }
        
        .tag-actions {
            display: flex;
            gap: 10px;
        }
        
        .follow-btn {
            background-color: var(--primary);
            color: white;
        }
        
        .share-btn {
            background-color: transparent;
            color: var(--gray);
            border: 1px solid var(--light-gray);
        }
        
        /* 内容导航 */
        .content-tabs {
            display: flex;
            background-color: white;
            overflow-x: auto;
            scrollbar-width: none;
            border-bottom: 1px solid var(--light-gray);
        }
        
        .content-tabs::-webkit-scrollbar {
            display: none;
        }
        
        .content-tab {
            padding: 14px 16px;
            flex-shrink: 0;
            background: none;
            border: none;
            font-size: 15px;
            color: var(--gray);
            border-bottom: 3px solid transparent;
        }
        
        .content-tab.active {
            color: var(--primary);
            border-bottom-color: var(--primary);
            font-weight: 500;
        }
        
        /* 内容列表通用样式 */
        .content-section {
            padding: 16px;
            display: none;
        }
        
        .content-section.active {
            display: block;
        }
        
        .section-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 16px;
        }
        
        .section-title {
            font-size: 17px;
            font-weight: 600;
        }
        
        .view-all {
            font-size: 14px;
            color: var(--primary);
        }
        
        .content-list {
            display: flex;
            flex-direction: column;
            gap: 12px;
        }
        
        /* 文章列表样式 */
        .article-item {
            background-color: white;
            border-radius: var(--border-radius);
            padding: 16px;
            box-shadow: var(--card-shadow);
        }
        
        .article-header {
            display: flex;
            gap: 10px;
            margin-bottom: 12px;
        }
        
        .user-avatar {
            width: 36px;
            height: 36px;
            border-radius: 50%;
            object-fit: cover;
        }
        
        .user-info {
            flex: 1;
        }
        
        .user-name {
            font-size: 14px;
            font-weight: 500;
        }
        
        .post-time {
            font-size: 12px;
            color: var(--gray);
        }
        
        .article-title {
            font-size: 16px;
            font-weight: 600;
            margin-bottom: 8px;
            line-height: 1.4;
        }
        
        .article-excerpt {
            font-size: 14px;
            color: var(--gray);
            line-height: 1.5;
            margin-bottom: 12px;
        }
        
        .article-image {
            width: 100%;
            border-radius: 6px;
            margin-bottom: 12px;
        }
        
        .article-actions {
            display: flex;
            justify-content: space-between;
            font-size: 13px;
            color: var(--gray);
        }
        
        .action-item {
            display: flex;
            align-items: center;
            gap: 4px;
        }
        
        /* 相册列表样式 */
        .album-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 8px;
        }
        
        .album-item {
            aspect-ratio: 1/1;
            border-radius: var(--border-radius);
            overflow: hidden;
            position: relative;
        }
        
        .album-image {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        
        .album-overlay {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            background: linear-gradient(transparent, rgba(0,0,0,0.6));
            padding: 8px;
            color: white;
            font-size: 12px;
        }
        
        /* 动态列表样式 */
        .status-item {
            background-color: white;
            border-radius: var(--border-radius);
            padding: 16px;
            box-shadow: var(--card-shadow);
        }
        
        .status-content {
            font-size: 15px;
            line-height: 1.6;
            margin-bottom: 12px;
        }
        
        .status-images {
            display: flex;
            gap: 8px;
            margin-bottom: 12px;
        }
        
        .status-image {
            flex: 1;
            aspect-ratio: 1/1;
            border-radius: 6px;
            object-fit: cover;
        }
        
        /* 服务列表样式 */
        .service-item {
            background-color: white;
            border-radius: var(--border-radius);
            padding: 16px;
            box-shadow: var(--card-shadow);
            display: flex;
            gap: 12px;
        }
        
        .service-icon {
            width: 48px;
            height: 48px;
            border-radius: 8px;
            background-color: rgba(66, 133, 244, 0.1);
            color: var(--primary);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 20px;
        }
        
        .service-details {
            flex: 1;
        }
        
        .service-title {
            font-size: 16px;
            font-weight: 600;
            margin-bottom: 4px;
        }
        
        .service-desc {
            font-size: 14px;
            color: var(--gray);
            margin-bottom: 6px;
        }
        
        .service-price {
            font-size: 14px;
            color: var(--primary);
            font-weight: 500;
        }
        
        /* 招聘求职列表样式 */
        .job-item {
            background-color: white;
            border-radius: var(--border-radius);
            padding: 16px;
            box-shadow: var(--card-shadow);
        }
        
        .job-title {
            font-size: 16px;
            font-weight: 600;
            margin-bottom: 4px;
        }
        
        .job-company {
            font-size: 14px;
            color: var(--primary);
            margin-bottom: 8px;
        }
        
        .job-meta {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            font-size: 13px;
            color: var(--gray);
            margin-bottom: 10px;
        }
        
        .job-tags {
            display: flex;
            flex-wrap: wrap;
            gap: 6px;
            margin-bottom: 10px;
        }
        
        .job-tag {
            padding: 3px 8px;
            background-color: var(--light);
            border-radius: 4px;
            font-size: 12px;
            color: var(--gray);
        }
        
        .job-action {
            text-align: right;
        }
        
        .apply-btn {
            padding: 6px 14px;
            background-color: var(--primary);
            color: white;
            border: none;
            border-radius: 4px;
            font-size: 14px;
        }
        
        /* 底部导航 */
        .bottom-nav {
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            height: 60px;
            background-color: white;
            display: flex;
            justify-content: space-around;
            align-items: center;
            border-top: 1px solid var(--light-gray);
            z-index: 1000;
        }
        
        .nav-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            color: var(--gray);
            font-size: 10px;
            gap: 4px;
            text-decoration: none;
            flex: 1;
        }
        
        .nav-item.active {
            color: var(--primary);
        }
        
        .nav-icon {
            font-size: 20px;
        }
        
        /* 相关标签 */
        .related-tags {
            padding: 16px;
            background-color: white;
            margin-top: 16px;
        }
        
        .tags-container {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            margin-top: 12px;
        }
        
        .related-tag {
            padding: 6px 12px;
            background-color: var(--light);
            border-radius: 16px;
            font-size: 14px;
            color: var(--gray);
            border: none;
        }
        
        .related-tag:hover {
            background-color: var(--primary);
            color: white;
        }
        
        /* 加载更多 */
        .load-more {
            width: 100%;
            margin-top: 16px;
            padding: 12px;
            background-color: white;
            border: 1px solid var(--light-gray);
            border-radius: var(--border-radius);
            color: var(--dark);
            font-size: 15px;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
        }
    </style>
</head>
<body>
    <!-- 顶部导航 -->
    <div class="top-nav">
        <button class="nav-btn" id="backBtn">
            <i class="fas fa-arrow-left"></i>
        </button>
        <div class="nav-title">标签详情</div>
        <button class="nav-btn" id="moreBtn">
            <i class="fas fa-ellipsis-v"></i>
        </button>
    </div>
    
    <!-- 标签头部信息 -->
    <div class="tag-header">
        <div class="tag-banner"></div>
        <div class="tag-info">
            <div class="tag-avatar">
                <i class="fas fa-camera"></i>
            </div>
            <div class="tag-details">
                <div class="tag-name">摄影</div>
                <div class="tag-meta">
                    <span><i class="fas fa-users"></i> 24.5k 关注</span>
                    <span><i class="fas fa-file-alt"></i> 12.8k 内容</span>
                </div>
                <div class="tag-desc">
                    分享摄影技巧、作品展示、器材评测和摄影故事的社区，汇聚全球摄影爱好者。
                </div>
                <div class="tag-actions">
                    <button class="action-btn follow-btn">
                        <i class="fas fa-plus"></i> 关注
                    </button>
                    <button class="action-btn share-btn">
                        <i class="fas fa-share-alt"></i> 分享
                    </button>
                </div>
            </div>
        </div>
    </div>
    
    <!-- 内容导航 -->
    <div class="content-tabs">
        <button class="content-tab active" data-content="articles">文章</button>
        <button class="content-tab" data-content="albums">相册</button>
        <button class="content-tab" data-content="statuses">动态</button>
        <button class="content-tab" data-content="services">服务</button>
        <button class="content-tab" data-content="recruitments">招聘</button>
        <button class="content-tab" data-content="job-seekings">求职</button>
    </div>
    
    <!-- 1. 文章列表 -->
    <div class="content-section active" id="articles">
        <div class="section-header">
            <div class="section-title">摄影相关文章</div>
            <div class="view-all">查看全部</div>
        </div>
        
        <div class="content-list">
            <div class="article-item">
                <div class="article-header">
                    <img src="https://picsum.photos/id/64/100/100" alt="用户头像" class="user-avatar">
                    <div class="user-info">
                        <div class="user-name">摄影达人</div>
                        <div class="post-time">2小时前</div>
                    </div>
                </div>
                <div class="article-title">初学者必看：10个提升构图能力的实用技巧</div>
                <div class="article-excerpt">
                    摄影构图是决定作品质量的关键因素之一。本文将分享10个简单实用的构图技巧，帮助摄影初学者快速提升作品水平，拍出更具专业感的照片...
                </div>
                <img src="https://picsum.photos/id/96/600/300" alt="文章图片" class="article-image">
                <div class="article-actions">
                    <div class="action-item"><i class="far fa-heart"></i> 245</div>
                    <div class="action-item"><i class="far fa-comment"></i> 56</div>
                    <div class="action-item"><i class="far fa-bookmark"></i> 128</div>
                    <div class="action-item"><i class="far fa-share-square"></i> 32</div>
                </div>
            </div>
            
            <div class="article-item">
                <div class="article-header">
                    <img src="https://picsum.photos/id/65/100/100" alt="用户头像" class="user-avatar">
                    <div class="user-info">
                        <div class="user-name">光影记录者</div>
                        <div class="post-time">昨天 15:30</div>
                    </div>
                </div>
                <div class="article-title">如何在弱光环境下拍出高质量夜景照片</div>
                <div class="article-excerpt">
                    夜景摄影一直是摄影爱好者的挑战。本文将从器材选择、参数设置、拍摄技巧等方面，详细介绍如何在弱光环境下拍摄出清晰、噪点少、氛围感强的夜景照片...
                </div>
                <img src="https://picsum.photos/id/29/600/300" alt="文章图片" class="article-image">
                <div class="article-actions">
                    <div class="action-item"><i class="far fa-heart"></i> 189</div>
                    <div class="action-item"><i class="far fa-comment"></i> 42</div>
                    <div class="action-item"><i class="far fa-bookmark"></i> 95</div>
                    <div class="action-item"><i class="far fa-share-square"></i> 27</div>
                </div>
            </div>
        </div>
        
        <button class="load-more">
            <i class="fas fa-spinner fa-spin"></i>
            <span>加载更多文章</span>
        </button>
    </div>
    
    <!-- 2. 相册列表 -->
    <div class="content-section" id="albums">
        <div class="section-header">
            <div class="section-title">摄影作品相册</div>
            <div class="view-all">查看全部</div>
        </div>
        
        <div class="album-grid">
            <div class="album-item">
                <img src="https://picsum.photos/id/10/300/300" alt="风景摄影" class="album-image">
                <div class="album-overlay">自然风光 | 24张</div>
            </div>
            <div class="album-item">
                <img src="https://picsum.photos/id/20/300/300" alt="人像摄影" class="album-image">
                <div class="album-overlay">人像写真 | 18张</div>
            </div>
            <div class="album-item">
                <img src="https://picsum.photos/id/30/300/300" alt="城市摄影" class="album-image">
                <div class="album-overlay">城市建筑 | 32张</div>
            </div>
            <div class="album-item">
                <img src="https://picsum.photos/id/40/300/300" alt="微距摄影" class="album-image">
                <div class="album-overlay">微距世界 | 26张</div>
            </div>
            <div class="album-item">
                <img src="https://picsum.photos/id/50/300/300" alt="动物摄影" class="album-image">
                <div class="album-overlay">野生动物 | 15张</div>
            </div>
            <div class="album-item">
                <img src="https://picsum.photos/id/60/300/300" alt="街拍摄影" class="album-image">
                <div class="album-overlay">街头瞬间 | 42张</div>
            </div>
        </div>
        
        <button class="load-more">
            <i class="fas fa-spinner fa-spin"></i>
            <span>加载更多相册</span>
        </button>
    </div>
    
    <!-- 3. 动态列表 -->
    <div class="content-section" id="statuses">
        <div class="section-header">
            <div class="section-title">摄影社区动态</div>
            <div class="view-all">查看全部</div>
        </div>
        
        <div class="content-list">
            <div class="status-item">
                <div class="article-header">
                    <img src="https://picsum.photos/id/91/100/100" alt="用户头像" class="user-avatar">
                    <div class="user-info">
                        <div class="user-name">街头摄影师</div>
                        <div class="post-time">30分钟前</div>
                    </div>
                </div>
                <div class="status-content">
                    今天运气不错，在老街捕捉到了一组很有故事感的瞬间。阳光穿过巷弄的角度刚刚好，光影效果太棒了！#街头摄影 #光影
                </div>
                <div class="status-images">
                    <img src="https://picsum.photos/id/26/300/300" alt="动态图片" class="status-image">
                    <img src="https://picsum.photos/id/27/300/300" alt="动态图片" class="status-image">
                </div>
                <div class="article-actions">
                    <div class="action-item"><i class="far fa-heart"></i> 89</div>
                    <div class="action-item"><i class="far fa-comment"></i> 15</div>
                    <div class="action-item"><i class="far fa-share-square"></i> 8</div>
                </div>
            </div>
            
            <div class="status-item">
                <div class="article-header">
                    <img src="https://picsum.photos/id/92/100/100" alt="用户头像" class="user-avatar">
                    <div class="user-info">
                        <div class="user-name">自然之眼</div>
                        <div class="post-time">5小时前</div>
                    </div>
                </div>
                <div class="status-content">
                    新买的长焦镜头终于到了！迫不及待去郊外试了试，抓拍飞鸟的效果比预期的还要好。分享一张今天的成果，大家觉得怎么样？#器材评测 #自然摄影
                </div>
                <div class="status-images">
                    <img src="https://picsum.photos/id/65/600/300" alt="动态图片" class="status-image" style="flex: 2;">
                </div>
                <div class="article-actions">
                    <div class="action-item"><i class="far fa-heart"></i> 156</div>
                    <div class="action-item"><i class="far fa-comment"></i> 32</div>
                    <div class="action-item"><i class="far fa-share-square"></i> 12</div>
                </div>
            </div>
        </div>
        
        <button class="load-more">
            <i class="fas fa-spinner fa-spin"></i>
            <span>加载更多动态</span>
        </button>
    </div>
    
    <!-- 4. 服务列表 -->
    <div class="content-section" id="services">
        <div class="section-header">
            <div class="section-title">摄影相关服务</div>
            <div class="view-all">查看全部</div>
        </div>
        
        <div class="content-list">
            <div class="service-item">
                <div class="service-icon">
                    <i class="fas fa-camera"></i>
                </div>
                <div class="service-details">
                    <div class="service-title">专业人像摄影服务</div>
                    <div class="service-desc">提供个人写真、情侣照、家庭合影等专业摄影服务，含后期修图</div>
                    <div class="service-price">¥399 起/套</div>
                </div>
            </div>
            
            <div class="service-item">
                <div class="service-icon">
                    <i class="fas fa-laptop"></i>
                </div>
                <div class="service-details">
                    <div class="service-title">摄影后期修图课程</div>
                    <div class="service-desc">线上一对一教学，从基础到进阶，掌握专业修图技巧</div>
                    <div class="service-price">¥299 起/课时</div>
                </div>
            </div>
            
            <div class="service-item">
                <div class="service-icon">
                    <i class="fas fa-video"></i>
                </div>
                <div class="service-details">
                    <div class="service-title">短视频拍摄剪辑</div>
                    <div class="service-desc">专业团队提供产品宣传、活动记录等短视频拍摄剪辑服务</div>
                    <div class="service-price">¥899 起/条</div>
                </div>
            </div>
            
            <div class="service-item">
                <div class="service-icon">
                    <i class="fas fa-camera-retro"></i>
                </div>
                <div class="service-details">
                    <div class="service-title">高端相机租赁服务</div>
                    <div class="service-desc">提供各类高端相机及镜头租赁，支持按天/周/月租用</div>
                    <div class="service-price">¥199 起/天</div>
                </div>
            </div>
        </div>
        
        <button class="load-more">
            <i class="fas fa-spinner fa-spin"></i>
            <span>加载更多服务</span>
        </button>
    </div>
    
    <!-- 5. 招聘列表 -->
    <div class="content-section" id="recruitments">
        <div class="section-header">
            <div class="section-title">摄影相关招聘</div>
            <div class="view-all">查看全部</div>
        </div>
        
        <div class="content-list">
            <div class="job-item">
                <div class="job-title">专业摄影师</div>
                <div class="job-company">城市摄影工作室</div>
                <div class="job-meta">
                    <span>全职</span>
                    <span>经验2年以上</span>
                    <span>薪资8k-15k</span>
                    <span>北京</span>
                </div>
                <div class="job-tags">
                    <span class="job-tag">人像摄影</span>
                    <span class="job-tag">后期修图</span>
                    <span class="job-tag">团队合作</span>
                </div>
                <div class="job-action">
                    <button class="apply-btn">立即申请</button>
                </div>
            </div>
            
            <div class="job-item">
                <div class="job-title">摄影编辑</div>
                <div class="job-company">视觉文化杂志社</div>
                <div class="job-meta">
                    <span>全职</span>
                    <span>经验1年以上</span>
                    <span>薪资6k-10k</span>
                    <span>上海</span>
                </div>
                <div class="job-tags">
                    <span class="job-tag">内容策划</span>
                    <span class="job-tag">图片编辑</span>
                    <span class="job-tag">文字功底</span>
                </div>
                <div class="job-action">
                    <button class="apply-btn">立即申请</button>
                </div>
            </div>
        </div>
        
        <button class="load-more">
            <i class="fas fa-spinner fa-spin"></i>
            <span>加载更多招聘</span>
        </button>
    </div>
    
    <!-- 6. 求职列表 -->
    <div class="content-section" id="job-seekings">
        <div class="section-header">
            <div class="section-title">摄影相关求职</div>
            <div class="view-all">查看全部</div>
        </div>
        
        <div class="content-list">
            <div class="job-item">
                <div class="job-title">自由摄影师求职</div>
                <div class="job-company">张明 - 3年经验</div>
                <div class="job-meta">
                    <span>兼职/全职</span>
                    <span>擅长：风光摄影</span>
                    <span>期望薪资：10k+</span>
                    <span>可出差</span>
                </div>
                <div class="job-tags">
                    <span class="job-tag">风光摄影</span>
                    <span class="job-tag">无人机操作</span>
                    <span class="job-tag">后期制作</span>
                </div>
                <div class="job-action">
                    <button class="apply-btn">联系我</button>
                </div>
            </div>
            
            <div class="job-item">
                <div class="job-title">摄影助理求职</div>
                <div class="job-company">李华 - 应届毕业生</div>
                <div class="job-meta">
                    <span>全职</span>
                    <span>摄影专业</span>
                    <span>期望薪资：4k-6k</span>
                    <span>广州</span>
                </div>
                <div class="job-tags">
                    <span class="job-tag">学习能力强</span>
                    <span class="job-tag">熟悉器材</span>
                    <span class="job-tag">团队协作</span>
                </div>
                <div class="job-action">
                    <button class="apply-btn">联系我</button>
                </div>
            </div>
        </div>
        
        <button class="load-more">
            <i class="fas fa-spinner fa-spin"></i>
            <span>加载更多求职</span>
        </button>
    </div>
    
    <!-- 相关标签 -->
    <div class="related-tags">
        <div class="section-title">相关标签</div>
        <div class="tags-container">
            <button class="related-tag">人像摄影</button>
            <button class="related-tag">风光摄影</button>
            <button class="related-tag">街头摄影</button>
            <button class="related-tag">摄影器材</button>
            <button class="related-tag">后期修图</button>
            <button class="related-tag">胶片摄影</button>
            <button class="related-tag">无人机摄影</button>
            <button class="related-tag">商业摄影</button>
        </div>
    </div>
    
    <!-- 底部导航 -->
    <div class="bottom-nav">
        <a href="#" class="nav-item">
            <i class="fas fa-home nav-icon"></i>
            <span>首页</span>
        </a>
        <a href="#" class="nav-item active">
            <i class="fas fa-tags nav-icon"></i>
            <span>标签</span>
        </a>
        <a href="#" class="nav-item">
            <i class="fas fa-plus-circle nav-icon"></i>
            <span>发布</span>
        </a>
        <a href="#" class="nav-item">
            <i class="fas fa-bell nav-icon"></i>
            <span>通知</span>
        </a>
        <a href="#" class="nav-item">
            <i class="fas fa-user nav-icon"></i>
            <span>我的</span>
        </a>
    </div>
    
    <!-- Bootstrap JS Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
    
    <script>
        // 内容标签切换
        const contentTabs = document.querySelectorAll('.content-tab');
        const contentSections = document.querySelectorAll('.content-section');
        
        contentTabs.forEach(tab => {
            tab.addEventListener('click', function() {
                // 切换标签状态
                contentTabs.forEach(t => t.classList.remove('active'));
                this.classList.add('active');
                
                // 显示对应内容区域
                const contentId = this.getAttribute('data-content');
                contentSections.forEach(section => {
                    section.classList.remove('active');
                });
                document.getElementById(contentId).classList.add('active');
            });
        });
        
        // 关注按钮交互
        const followBtn = document.querySelector('.follow-btn');
        followBtn.addEventListener('click', function() {
            if (this.innerHTML.includes('关注')) {
                this.innerHTML = '<i class="fas fa-check"></i> 已关注';
                this.style.backgroundColor = 'var(--gray)';
            } else {
                this.innerHTML = '<i class="fas fa-plus"></i> 关注';
                this.style.backgroundColor = 'var(--primary)';
            }
        });
        
        // 相关标签点击
        const relatedTags = document.querySelectorAll('.related-tag');
        relatedTags.forEach(tag => {
            tag.addEventListener('click', function() {
                const tagName = this.textContent;
                alert(`切换到 ${tagName} 标签`);
            });
        });
        
        // 导航按钮交互
        document.getElementById('backBtn').addEventListener('click', () => {
            alert('返回上一页');
        });
        
        document.getElementById('moreBtn').addEventListener('click', () => {
            alert('更多选项');
        });
        
        // 查看全部按钮
        const viewAllBtns = document.querySelectorAll('.view-all');
        viewAllBtns.forEach(btn => {
            btn.addEventListener('click', function() {
                const sectionTitle = this.parentElement.querySelector('.section-title').textContent;
                alert(`查看全部${sectionTitle}`);
            });
        });
        
        // 加载更多按钮
        const loadMoreBtns = document.querySelectorAll('.load-more');
        loadMoreBtns.forEach(btn => {
            btn.addEventListener('click', function() {
                const originalText = this.innerHTML;
                this.innerHTML = '<i class="fas fa-spinner fa-spin"></i><span> 加载中...</span>';
                
                // 模拟加载延迟
                setTimeout(() => {
                    this.innerHTML = originalText;
                    alert('已加载更多内容');
                }, 1500);
            });
        });
        
        // 文章/动态交互
        const articleItems = document.querySelectorAll('.article-item, .status-item');
        articleItems.forEach(item => {
            item.addEventListener('click', function(e) {
                // 忽略点击动作按钮的情况
                if (!e.target.closest('.action-item')) {
                    alert('查看内容详情');
                }
            });
        });
        
        // 相册点击
        const albumItems = document.querySelectorAll('.album-item');
        albumItems.forEach(item => {
            item.addEventListener('click', function() {
                alert('查看相册详情');
            });
        });
        
        // 服务点击
        const serviceItems = document.querySelectorAll('.service-item');
        serviceItems.forEach(item => {
            item.addEventListener('click', function() {
                alert('查看服务详情');
            });
        });
    </script>
</body>
</html>
